<template>
  <div class="pro-info-block">
    <div class="pro-title">{{ problemInfo.name }}</div>
    <div class="pro-level">
      难度：
      <span class="level-name">
          <el-tag type="error" v-if="problemInfo.level==3">
              困难
          </el-tag>
          <el-tag type="warning" v-else-if="problemInfo.level==2">
              中等
          </el-tag>
          <el-tag type="success" v-else>
              简单
          </el-tag>
      </span>
      分数：
      <span class="point-text">{{ problemInfo.point }}</span>
    </div>
    <div class="pro-level">
      时间限制：
      <span class="level-name">
        {{ (problemInfo.timeLimit / 1000000 ).toFixed(2)}}ms
      </span>
      空间限制：
      <span class="point-text">
        {{ (problemInfo.spaceLimit / 1000000).toFixed(2)}}MB
      </span>
    </div>
    <div class="pro-discrip" v-html="problemInfo.description">

    </div>
  </div>

</template>

<script>
import {Problem} from "../../utils/http/problem";
import editor from 'mavon-editor'
const markdownIt = editor.markdownIt;

export default {
  name: "ProblemDetail",
  data: function () {
    return {
      pid: this.$route.params.proId,
      problemInfo : {}
    }
  },
  async mounted() {
    let resp = await Problem.getById(this.$route.params.proId)
    if (!resp?.success) {
      this.$error("获取题目数据失败，请稍候重试")
    }else {
      let p = resp.data
      p.tags = JSON.parse(p.tags)
      p.description = markdownIt.render(p.description)
      this.problemInfo = p;
    }
  }
}
</script>

<style scoped>

.pro-info-block{
  font-weight: normal;
}

.pro-title{
  padding: 10px 20px;
  font-size: 25px;
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  box-sizing: border-box;
}

.pro-level{
  color: black;
  padding: 10px 20px;
  margin-bottom: 20px;
  border-bottom:  1px solid #f1f1f1;
  font-size: 18px;
}

.level-name{
  margin-right: 30px;
}

.pro-discrip{
  font-size: 16px;
  padding: 20px;
  line-height: 20px;
  letter-spacing: 1px;
  text-align: left;
}

.pro-discrip pre{
  padding: 10px;
  display: block;
  width: 100%;
  background: #fafafa;
  margin: 10px 0;
  border: 1px solid #eee;
}

</style>
